<template>
	<!-- Header组件 -->
	<div class="bili-header">
		<div class="header-center">
			<div class="header-banner">
				<div class="header-bar">
					<ul class="bar-bilibili">
						<li class="left-bili">
							<a href="#">
								<img
									src="./images/Snipaste_2022-04-15_17-24-43.png"
									alt="bilibili"
								/>
								<div class="left-shouye">
									<span class="left-one">首页</span>

									<span class="iconfont icon-xiangxia"></span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">番剧</a>
						</li>
						<li>
							<a href="#">直播</a>
						</li>
						<li>
							<a href="#">游戏中心</a>
						</li>
						<li>
							<a href="#">会员购</a>
						</li>
						<li>
							<a href="#">漫画</a>
						</li>
						<li>
							<a href="#">赛事</a>
						</li>
					</ul>
					<div class="bar-search">
						<div class="search-center">
							<form class="search-form">
								<input
									class="search-box"
									type="text"
									placeholder="智商天花板，亦有差距"
								/>
								<span class="iconfont icon-Magnifier"></span>
							</form>
						</div>
					</div>
					<ul class="bar-user">
						<li class="user-img v-popover-wrap" @click="loginHandler">
							<div class="img-info">
								<!-- <img
						src="./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp"
							class="imger"
							alt="用户头像"
						/> -->
							</div>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-huiyuan"></span>
							<span>大会员</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-xiaoxi1"></span>
							<span>消息</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-dongtai"></span>
							<span>动态</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-shoucang"></span>
							<span>收藏</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-lishi"></span>
							<span>历史</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-dengpao"></span>
							<span>创作中心</span>
						</li>
						<li class="v-popover-wrap">
							<div class="pushWord">
								<span class="iconfont icon-shangchuan1"></span>
								<span>投稿</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="header-channel">
				<div class="channer-left">
					<div class="channer">
						<span class="channer-icon iconfont icon-dongtai"></span>
						<span>动态</span>
					</div>
					<div class="channer">
						<span class="channer-icon iconfont icon-remen"></span>
						<span>热门</span>
					</div>
					<div class="channer">
						<span class="channer-icon iconfont icon-pindao"></span>
						<span>频道</span>
					</div>
				</div>
				<div class="channer-right">
					<ul class="channer-center">
						<li>番剧</li>
						<li>国创</li>
						<li>综艺</li>
						<li>动画</li>
						<li>鬼畜</li>
						<li>舞蹈</li>
						<li>娱乐</li>
						<li>科技</li>
						<li>美食</li>
						<li>番剧</li>
						<li>国创</li>
						<li>综艺</li>
						<li>动画</li>
						<li>鬼畜</li>
						<li>舞蹈</li>
						<li>娱乐</li>
						<li>科技</li>
						<li>美食</li>
					</ul>
					<ul class="channer-zhuan">
						<li>
							<span class="iconfont icon-columnszhuanlan"></span>
							<span>专栏</span>
						</li>
						<li>
							<span class="iconfont icon-icon"></span>
							<span>课堂</span>
						</li>
						<li>
							<span class="iconfont icon-hongqi"></span>
							<span>活动</span>
						</li>

						<li>
							<span class="iconfont icon-15"></span>
							<span>直播</span>
						</li>
						<li>
							<span class="iconfont icon-duihuaxinxitianchong"></span>
							<span>社区中心</span>
						</li>

						<li>
							<span class="iconfont icon-yinleyule channer-icon"></span>
							<span>新歌热榜</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "HeaderComp",
	methods: {
		loginHandler() {
			this.$router.push("/login");
		},
	},
};
</script>

<style lang="less" scoped>
.bili-header {
	min-height: 64px;
	position: relative;
	margin: 0 auto;
	max-width: 2560px;
	width: 100%;
	background-color: #ffffff;
	.header-center {
		// width: 1300px;
		margin: 0 auto;
		.header-banner {
			width: 100%;
			background-image: url("./images/Snipaste_2022-04-17_10-37-45.png");
			background-size: cover;
			height: 155px;
			// border: 1px solid black;
			.header-bar {
				// border: 1px solid #efefef;
				z-index: 1002;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24px 0 24px;
				max-width: 2560px;
				width: 100%;
				height: 64px;
				box-sizing: border-box;
				.bar-bilibili {
					list-style-type: none;
					padding: 0;
					display: flex;
					align-items: center;
					flex-shrink: 0;
					li {
						position: relative;
						a {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 56px;
							text-decoration: none;
							color: #18191c;
							font-size: 13px;
							margin-right: 10px;
						}
					}
					.left-bili {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 56px;
						img {
							width: 60px;
							margin-right: 10px;
						}
						.left-shouye {
							display: flex;
							align-items: center;
							text-align: center;
							font-size: 14px;
							line-height: 20px;
							cursor: pointer;
							.left-one {
								display: inline-block;
								margin-right: 5px;
							}
							.icon-xiangxia {
								font-size: 5px;
							}
						}
					}
				}
				.bar-search {
					margin: 0 10px;
					flex: 1 auto;
					height: 38px;

					.search-center {
						position: relative;
						margin: 0 auto;
						.search-form {
							display: flex;
							align-items: center;
							padding: 0 48px 0 4px;
							position: relative;
							z-index: 1;
							overflow: hidden;
							line-height: 38px;
							// border: 1px solid #eae9eb;
							height: 40px;
							background-color: #eae9eb;
							opacity: 0.9;
							transition: background-color 0.3s;
							border-radius: 5px;
							// border: 1px solid var(--line_regular);
							border-bottom: none;
							// background: var(--bg1);
							&:hover {
								background-color: #fff;
							}
							.search-box {
								color: #61666d;
								// background-color: #eae9eb;
								background-color: transparent;
								flex: 1;
								overflow: hidden;
								padding-right: 8px;
								box-shadow: none;
								font-size: 14px;
								line-height: 20px;
								border: none;
								&:focus {
									border: 1px solid #61666d;
									outline: none;
								}
							}
							.icon-Magnifier {
								// border: 1px solid #000;
								position: absolute;
								top: 3px;
								right: 7px;
								display: flex;
								align-items: center;
								justify-content: center;
								margin: 0;
								padding: 0;
								width: 32px;
								height: 32px;
								border: none;
								border-radius: 6px;
								color: #29272b;
								line-height: 32px;
								cursor: pointer;
								transition: background-color 0.3s;
								&:hover {
									background-color: #eae9eb;
								}
							}
						}
					}
				}

				.bar-user {
					list-style-type: none;
					display: flex;
					align-items: center;
					margin-right: 10px;
					padding: 0;
					.v-popover-wrap {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #18191c;
						font-size: 14px;
						margin: 0 5px;
					}
					.user-img {
						position: relative;
						box-sizing: content-box;
						// padding-right: 10px;
						width: 50px;
						height: 50px;
						cursor: pointer;
						.img-info {
							width: 38px;
							height: 38px;
							box-sizing: content-box;
							border: 2px solid #fff;
							display: block;
							position: absolute;
							right: 0;
							background-image: url("./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp");
							background-size: cover;
							border-radius: 50%;
							margin: 0;
							padding: 0;
						}
					}
					.pushWord {
						margin-left: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						// margin-left: 16px;
						width: 90px;
						height: 34px;
						border-radius: 8px;
						background: #fb7299;
						color: #fff;
						text-align: center;
						font-size: 14px;
						line-height: 20px;
						cursor: pointer;
						transition: background-color 0.3s;
						font-weight: 500;
					}
				}
			}
		}
		.header-channel {
			height: 100px;
			display: flex;
			align-items: center;
			padding: 0 56px;
			position: relative;
			width: 100%;
			margin: 0 auto;
			box-sizing: border-box;
			.channer-left {
				display: flex;
				margin-right: 4px;
				z-index: 0;
				display: flex;
				align-items: center;
				.channer {
					display: flex;
					margin-right: 16px;
					position: relative;
					align-items: center;
					flex-direction: column;
					color: black;
					font-size: 13px;
					.channer-icon {
						width: 40px;
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 6px;
						border-radius: 50%;
						color: white;
						font-size: 25px;
					}
					.icon-dongtai {
						background-color: #ff9212;
					}
					.icon-remen {
						background-color: #f07775;
					}
					.icon-pindao {
						background-color: #59ca73;
					}
				}
			}
			.channer-right {
				display: flex;
				height: 100px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.channer-center {
					padding: 0;
					margin: 0;
					padding-right: 20px;
					list-style: none;
					display: grid;
					// align-items: center;
					// width: 728px;
					// flex-shrink: 0;
					// flex-wrap: wrap;
					grid-auto-flow: column;
					grid-column: span 4;
					grid-gap: 10px;
					grid-template-rows: repeat(2, 1fr);
					border-right: 1px solid #f6f7f8;
					height: 66px;
					li {
						background-color: #f6f7f8;
						border: 1px solid #f6f7f8;
						border-radius: 6px;
						color: #61666d;
						text-align: center;
						font-weight: 400;
						font-size: 13px;
						height: 26px;
						line-height: 26px;
						width: 72px;
					}
				}
				.channer-zhuan {
					padding: 0;
					margin: 0;
					list-style: none;
					width: 230px;
					grid-column: span 1;
					grid-row-gap: 10px;
					grid-auto-flow: column;
					display: grid;
					grid-template-rows: repeat(2, 1fr);
					li {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						width: 100%;
						color: #747679;
						text-align: center;
						font-weight: 400;
						transition: background-color 0.3s, color 0.3s;
						font-size: 13px;
						.iconfont {
							margin-right: 4px;
						}
					}
				}
			}
		}
	}
}
</style>
